<template>
  <view class="container">
    <u-gap height="5"></u-gap>
    <view class="info-item" style="margin-bottom: 5px;" v-for="(item, index) in dataList" :key="index">
      <view class="info-line">
        <text class="title">{{ item.name }}</text>
      </view>

      <view class="info-line">
        <text class="label-name">登录时间</text>
        <text>{{ item.loginTime }}</text>
      </view>
      <view class="info-line">
        <text class="label-name">登录地点</text>
        <text>{{ item.userIP }}({{item.location}})</text>
      </view>

      <view class="info-line">
        <text class="label-name">登录浏览器</text>
        <text>{{ item.browser }}</text>
      </view>

      <view class="info-line">
        <text class="label-name">登录平台</text>
        <u-tag :text="item.platform" plain size="mini"></u-tag>
      </view>

      <view class="info-line">
        <text class="label-name">在线时长</text>
        <text>{{ item.onlineTime }}分钟</text>
      </view>

      <view class="info-btn-wrap justify-end">
        <view class="tag-item" v-if="myConnId != item.connnectionId">
          <u-tag text="强制退出" plain shape="circle" type="error" icon="lock" @click="handleToLock(item)"
            v-if="checkPermi(['monitor:online:forceLogout'])"></u-tag>
        </view>
      </view>

    </view>

    <view class="page-footer">
      <u-empty mode="list" :marginTop="140" v-if="totalNum == 0"></u-empty>
      <uni-pagination v-else show-icon="true" :total="totalNum" :pageSize="queryParams.pageSize"
        :current="queryParams.pageNum" @change="getData"></uni-pagination>
    </view>

    <u-modal :show="show" @confirm="submit" @close="show = false" :closeOnClickOverlay="true">
      <view class="slot-content">
        <u-form>
          <!--          <u-form-item label="剔出时间(分)" prop="form.time" labelWidth="90px" borderBottom ref="item1">
            <u-number-box v-model="form.time"></u-number-box>
          </u-form-item> -->

          <u--input placeholder="请输入剔出原因" border="surround" v-model="form.reason"></u--input>
        </u-form>
      </view>
    </u-modal>
  </view>
</template>

<script>
  import {
    listOnline,
    forceLogout
  } from '@/api/monitor/online.js'
  import {
    checkPermi,
    checkRole
  } from '@/utils/permission.js'
  export default {
    data() {
      return {
        queryParams: {
          pageNum: 1,
          pageSize: 20
        },
        totalNum: 0,
        dataList: [],
        show: false,
        form: {
          reason: '',
          time: 1,
          userId: undefined,
          connnectionId: undefined,
          clientId: ''
        }
      }
    },
    computed: {
      myConnId() {
        return this.$store.getters.connId
      }
    },
    onLoad() {
      this.getList()
    },
    methods: {
      checkPermi,
      checkRole,
      getList() {
        listOnline(this.queryParams).then((res) => {
          const {
            code,
            data
          } = res
          if (res.code == 200) {
            this.totalNum = data.totalNum;

            if (this.queryParams.pageNum <= 1) {
              this.dataList = data.result;
            } else {
              this.dataList = [...this.dataList, ...data.result];
            }
          }
        })
      },
      handleToLock(item) {
        this.show = true
        this.form.userId = item.userid
        this.form.connnectionId = item.connnectionId
        this.form.clientId = item.name
      },
      submit() {
        this.show = false
        if (this.form.connnectionId == this.$store.getters.connId) {
          this.$modal.msg('不能剔出自己');
          return
        }
        forceLogout(this.form).then(res => {
          this.$modal.msg('剔出成功')
          this.getList()
        })
      },
      getData(e) {
        this.queryParams.pageNum = e.current
        this.getList()
      },
      /**
       * 下拉刷新回调函数
       */
      onPullDownRefresh() {
        this.getList()
        uni.stopPullDownRefresh()
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "@/static/scss/page.scss";
</style>